﻿<form method="post">
    @Html.AntiForgeryToken()
    <div class="querybar">
        <table cellpadding="0" cellspacing="1" border="0" width="100%">
            <tr>
                <td>
                    名称：<input type="text" class="mytext" style="width:190px;" id="Name" name="Name" value="" />
                    <input type="button" name="Search" onclick="loadData();" value="&nbsp;&nbsp;查&nbsp;询&nbsp;&nbsp;" class="mybutton" />
                    <input type="button" onclick="edit(); return false;" value="添加按钮" class="mybutton" />
                    <input type="button" onclick="return del();" name="DeleteBut" value="删除所选" class="mybutton" />
                </td>
            </tr>
        </table>
    </div>
    <table id="listtable"></table>
    <script type="text/javascript">
        var appid = '@ViewData["appId"]';
        var iframeid = '@ViewData["tabId"]';
        var dialog = top.mainDialog || new RoadUI.Window();
        var rows = @Html.Raw(ViewData["json"]);
        $(function ()
        {
            $("#listtable").jqGrid({
                datatype: "local",
                colNames: ['按钮名称', '按钮图标', '按钮说明', '排序', ''],
                colModel: [
                    { name: 'Name', index: 'Name' },
                    { name: 'Ico', index: 'Ico' },
                    { name: 'Note', index: 'Note' },
                    { name: 'Sort', index: 'Sort', sorttype: 'integer', width: 50 },
                    { name: 'Opation', index: 'Opation', title: false, sortable: false, width: 50 },
                ],
                loadonce: true, //一次加载全部数据到客户端，由客户端进行排序。
                sortable: true,
                sortname: "Sort",
                sortorder: "asc",
                multiselect: true,
                height: $(window).height() - 80,
                rowNum: rows.length,
                width: $(window).width(),
                data: rows
            });

        });
        $(window).resize(function ()
        {
            $("#listtable").setGridWidth($(window).width());
        });
        function loadData()
        {
            var name = $.trim($("#Name").val()).toLowerCase();
            if (name.length == 0)
            {
                alert('请输入要查询的关键字!');
                return;
            }
            $("#listtable").jqGrid('clearGridData');
            for (var i = 0; i < rows.length; i++)
            {
                if (name.length == 0 || rows[i].Title.toLowerCase().indexOf(name) >= 0)
                {
                    $("#listtable").jqGrid('addRowData', rows[i].id, rows[i]);
                }
            }
        }
        function edit(id)
        {
            dialog.open({
                id: "window_" + appid.replaceAll('-', ''),
                title: "编辑按钮",
                width: 700,
                height: 420,
                url: 'Edit?buttonid=' + (id || "") + '&appid=' + appid + "&tabid=" + iframeid,
                opener: window,
                openerid: iframeid
            });
        }
        function del()
        {
            var rowIds = $("#listtable").jqGrid('getGridParam', 'selarrrow');
            if (rowIds.length == 0)
            {
                alert("您没有选择要删除的项");
                return false;
            }
            if (!confirm('您真的要删除所选按钮吗?'))
            {
                return false;
            }
            $.ajax({
                url: "Delete?appid=" + appid + "&tabid=" + iframeid,
                type: "post",
                data: {
                    "ids": rowIds.join(','),
                    __RequestVerificationToken: $("input[name='__RequestVerificationToken']").val()
                },
                success: function (txt)
                {
                    if (RoadUI.Core.checkLogin(txt, false))
                    {
                        alert(txt);
                    }
                    window.location = window.location;
                }
            });
            return true;
        }
    </script>
</form>